<template>
  <div class="contant">
    <img src="/static/imgs/hero/firstBg.png" alt="" class="firstBg">
    <img src="/static/imgs/hero/synthesisBg.png" alt="" class="synthesisBg" id="synthesisBg">
    <img src="/static/imgs/pk/addMoney.png" alt="" class="addMoney" @click="addMoney">
    <img src="/static/imgs/pk/pkIndexBtn.png" alt="" class="firstBtn" @click="pk">
    <div class="three" @click="selectHero(1)">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic1[3]+'.jpg'" alt="" v-if="parms.pic1">
      <img src="/static/imgs/hero/noHero.png" alt="" v-else>
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="threeT" id="threeT">1</div>
      <div class="threeB" v-if="parms.pic1">{{heroImgs[parms.pic1[3]]}}</div>
    </div>
    <div class="one" @click="selectHero(2)">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic2[3]+'.jpg'" alt="" v-if="parms.pic2">
      <img src="/static/imgs/hero/noHero.png" alt="" v-else>
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="oneT" id="oneT">2</div>
      <div class="oneB" v-if="parms.pic2">{{heroImgs[parms.pic2[3]]}}</div>
    </div>
    <div class="two" @click="selectHero(3)">
      <img :src="'http://www.kaimou.net/sanguoImgs/'+parms.pic3[3]+'.jpg'" alt="" v-if="parms.pic3">
      <img src="/static/imgs/hero/noHero.png" alt="" v-else>
      <img src="/static/imgs/hero/heroKuang.png" alt="">
      <div class="twoT" id="twoT">3</div>
      <div class="twoB" v-if="parms.pic3">{{heroImgs[parms.pic3[3]]}}</div>
    </div>
    <com-bets></com-bets>
    <com-tab></com-tab>
  </div>
</template>

<script>
  import bets from '@/components/bets'
  import tab from '@/components/tab'
  import api from '@/api'
  import { Indicator, Toast } from 'mint-ui'
  export default {
    name: 'pkIndex',
    data () {
      return {
        parms: this.$route.query,
        heroImgs:api.heroImgs
      }
    },
    watch: {
      $route(){
        this.parms = this.$route.query
      }
    },
    methods : {
      pk () {
        let that = this;
        if (that.parms.pic1 && that.parms.pic2 && that.parms.pic3){
          that.$router.push({path: '/pk', query: that.parms});
        } else {
          Toast('请选择武将')
        }

      },
      selectHero (num) {
        let _query = this.$route.query;
        _query.num = num
        this.$router.push({path: '/selectHero', query: _query})
      },
      addMoney () {
        this.$store.commit('openBets')
      }
    },
    mounted () {
      console.log(this.$route.query.pic3)
    },
    components: {
      'com-bets': bets,
      'com-tab': tab
    }
  }
</script>

<style scoped  lang="less">
  .contant{
    height: 100%;
    color: white;
    .firstBg{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: -1;
    }
    .synthesisBg{
      width: 100%;
      margin-top: 104%;
    }
    .firstBtn{
      width: 82%;
      position: absolute;
      left: 9%;
      bottom: 14%;
      z-index: 3;
    }
    .addMoney{
      width: 32%;
      position: absolute;
      right: 3%;
      top:16%;
      z-index: 10;
    }
    .three{
      width: 42.8%;
      height: 30%;
      position: absolute;
      left: 28.6%;
      top:32%;
      z-index: 5;
      .threeT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .threeB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0px;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 1rem;
      }
    }
    .one{
      width: 34.8%;
      height: 25%;
      position: absolute;
      left: -2%;
      top:43%;
      z-index: 4;
      transform:rotate(-14deg);
      .oneT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .oneB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 0.8rem;
      }
    }
    .two{
      width: 34.8%;
      height: 25%;
      position: absolute;
      right: -2%;
      top:43%;
      z-index: 4;
      transform:rotate(14deg);
      .twoT{
        position: absolute;
        width: 15%;
        height: 2rem;
        z-index: 6;
        top: 8px;
        left: 8px;
        text-align: center;
        line-height: 2rem;
      }
      .twoB{
        position: absolute;
        width: 50%;
        height: 2rem;
        z-index: 6;
        bottom: 0;
        left: 12px;
        text-align: left;
        line-height: 2rem;
        font-size: 0.8rem;
      }
    }
    .three>img,.one>img,.two>img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  @media screen and (max-width: 350px) {
    #oneT{
      top:2px;
    }
    #twoT{
      top:2px;
    }
  }
  @media screen and (min-height: 740px)  and (min-width: 360px){
    #synthesisBg{
      margin-top: 132%;
    }
    #threeT{
      top:15px;
    }
  }
</style>
